<template>
	<ul class="goods">
		<li v-for="(item,index) in goodsList" :key="item.id" @click="goDetail(item.id)">
			<div class="goods-top">
				<img :src="item.imgUrl" alt="" />
				<div class="goods-icon" :class="['icon-' + item.icon]">{{item.icon}}</div>
			</div>
			<div class="goods-bottom">
				<h2>{{item.name}}</h2>
				<div class="server">
					<i :class="{
					      'fas fa-truck': item.server === '可代客找车',
					      'fas fa-box-open': item.server === '可代客装卸',
					      'fas fa-check-circle': item.server === '全包'
					    }" />
					<span>{{item.server}}</span>
				</div>
				<div class="price">
					<span>￥{{item.price}}</span>
					<div>
						<img class="vs" src="/images/vs.png" alt="" />
						<img class="cart" src="/images/cart empty.gif" alt="" />
					</div>
				</div>
			</div>
		</li>
	</ul>
</template>

<script setup>
	// const goodsList = [{
	// 	id: 1,
	// 	name: '红薯叶 每斤',
	// 	imgUrl: '/images/goods-1.jpg',
	// 	server: '',
	// 	price: '1.98',
	// }, {
	// 	id: 2,
	// 	name: '有机胡萝卜 每斤',
	// 	imgUrl: '/images/goods-2.jpg',
	// 	server: '',
	// 	price: '5.98',

	// },{
	// 	id: 3,
	// 	name: '新疆哈密瓜 每斤',
	// 	imgUrl: '/images/goods-3.png',
	// 	server: '',
	// 	price: '3.54',

	// },{
	// 	id: 4,
	// 	name: '凯特芒果 每斤',
	// 	imgUrl: '/images/goods-4.png',
	// 	server: '',
	// 	price: '9.9',

	// }, ]
	// 发送请求
	import axios from 'axios'
	import {
		ref,
		onMounted
	} from 'vue'
	import http from '@/common/api/request.js'
	const goodsList = ref([])
	onMounted(() => {
		fetchData()
	})
	const fetchData = async () => {
		// const res = await axios.get('/api/index/homeList')
		let  res = await http.$axios({url:'/api/index/homeList'})
		console.log(res)
		// goodsList.value = res.data.data.goodsList
		goodsList.value = res.goodsList
	}
	// 点击商品跳转
	import {
		useRouter
	} from 'vue-router';
	let router = useRouter()
	const goDetail = (id) => {
		router.push({path:'/detail',query:{id}})
	}
</script>

<style scoped>
	.goods {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
		font-size: 16px;
		box-sizing: border-box;
		margin: 10px auto;
	}

	.goods li {
		display: flex;
		width: calc(50% - 0.8rem);
		flex-direction: column;
		box-sizing: border-box;
		margin: 10px auto;
		background-color: white;
		border-radius: 5px;
	}

	.goods-top {
		position: relative;
	}

	.goods-top img {
		width: 100%;
		border-radius: 5px;
	}

	.goods-icon {
		width: 1rem;
		height: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.25rem;
		font-weight: 600;
		/* background: url('images/icon1.png') no-repeat center 4px; */
		background-repeat: no-repeat;
		background-position: center 4px;
		background-size: contain;
		/* 确保背景图完整显示 */
		color: white;
		position: absolute;
		top: -20px;
		left: -20px;
		transform: rotate(-30deg);
	}

	.goods-icon.icon-配 {
		background-image: url('images/icon1.png');
	}

	.goods-icon.icon-供 {
		background-image: url('images/icon2.png');
	}

	.goods-bottom {
		padding: 0 10px;
	}

	.goods-bottom h2 {
		font-size: 16px;
	}

	.server {
		display: inline-block;
		border: 1px solid red;
		border-radius: 16px;
		color: red;
		font-size: 12px;
		padding: 0 5px;
		margin: 5px auto;
	}

	.price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 0;
	}

	.price>div {
		display: flex;
		align-items: center;
	}

	.vs {
		width: 0.5rem;
		padding: 0 2px;
	}

	.cart {
		width: 30px;
		height: 30px;
		padding: 0 2px;
	}
</style>